<template>
    <div>
        <van-sticky>
            <checkout-block-index-nav-bar :title="titleText" :backTru="'backTru'" :rigText="'确定'"
                                          @backMethod="backMethod"
                                          @rightTextClick="rightTextClick"/>
        </van-sticky>

        <div>
            <van-checkbox-group v-model="result">
                <van-cell-group>
                    <van-cell
                        v-for="(item, index) in list"
                        clickable
                        :key="item.id"
                        :title="`${item[itemName]}`"
                        @click="toggle(index)"
                    >
                        <template #right-icon>
                            <van-checkbox :name="item" ref="checkboxes"/>
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-checkbox-group>
        </div>
    </div>

</template>

<script>
import checkoutBlockIndexNavBar from "@/components/checkoutBlockIndexNavBar";

export default {
    name: "userCheckboxList",
    components: {
        checkoutBlockIndexNavBar
    },
    props: [
        "list",
        "itemName",
        "resultList",
        "titleText"
    ],
    data() {
        return {
            result: [],
        }
    },
    mounted() {
        if (typeof this.resultList != "undefined" && this.resultList.length > 0) {
            this.result = this.resultList
        }
    },
    methods: {
        rightTextClick() {
            this.$emit("rightCli", this.result)
        },
        toggle(index) {
            console.log(this.result)
            this.$refs.checkboxes[index].toggle();
        },
        backMethod() {
            this.$emit("backMethod")
        }
    }
}
</script>

<style scoped>
.container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 0;
    white-space: nowrap;
    overflow: hidden;
}

.container::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.dialog {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    font-size: 14px;
    white-space: nowrap;
}
</style>